<template>
  <div ref="el" :style="style" class="my-element">Drag me! I am at {{ x }}, {{ y }}</div>
  <p>
    x1:{{ x1 }}-y1:{{ y1 }}-top:{{ top }}-bottom:{{ bottom }}-right:{{ right }}-left:{{
      left
    }}-width:{{ width }}-height:{{ height }}
  </p>
  <p>width1:{{ width1 }}-height1:{{ height1 }}</p>
  <hr />
  <div ref="targetElement">11111</div>
  <p>这个元素是否可见: {{ isVisible ? '是' : '否' }}--isVisible:{{ isVisible }}</p>
  <button @click="toggleVisibility">切换可见性</button>
  <div style="padding-top: 1400px">
    <p>这个元素是否可见: {{ isVisible ? '是' : '否' }}--isVisible:{{ isVisible }}</p>
  </div>
  <hr />
  <div>
    <img v-lazy="'logo.png'" />
  </div>
  <hr />
  <p>滚动条位置:{{ scrollTop }}</p>
  <hr />
  <p>窗口宽度:{{ windowWidth }}-窗口高度:{{ windowHeight }}</p>
</template>

<script setup>
import { ref } from 'vue'
import {
  useDraggable,
  useElementBounding,
  useElementSize,
  useElementVisibility,
  useWindowScroll,
  useWindowSize
} from '@vueuse/core'
const el = ref(null)
// 获取元素边界
const { x: x1, y: y1, top, right, bottom, left, width, height } = useElementBounding(el)
// 拖拽
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 340, y: 340 },
  onMove: (position) => {
    console.log('position.x:', position.x)
    if (position.x < 0) {
      position.x = 0
    }

    if (position.y < 0) {
      position.y = 0
    }
  }
})
// 获取元素尺寸
const { width: width1, height: height1 } = useElementSize(el)
// 元素是否可见
const targetElement = ref(null)
const isVisible = useElementVisibility(targetElement)

const toggleVisibility = () => {
  targetElement.value.style.display =
    targetElement.value.style.display === 'none' ? 'block' : 'none'
}
window.addEventListener('scroll', () => {
  console.log('还在吗', isVisible.value)
})

//滚动条位置
const { y: scrollTop } = useWindowScroll()
const { width: windowWidth, height: windowHeight } = useWindowSize()
</script>

<style lang="scss" scoped>
.my-element {
  position: fixed;
  width: 200px;
  height: 200px;
  padding: 10px;
  background: #000;
  color: #fff;
}
</style>
